<!-- 购物车页面 -->
<template>
  <div class="my-cart">
    <div class="cart-box"
         v-if="itemList.length">
      <!-- 顶部 start-->
      <div class="header-bar">
        <span>共2件商品</span>
        <span @click="btnDel">删除</span>
      </div>
      <!-- 顶部 end -->

      <!--购物车商品列表 start -->
      <div class="item-list">
        <div class="item"
             v-for="item in itemList"
             :key="item.Id">
          <div>
            <span class="mint-checkbox"
                  @click="handleSelect(item)">
              <input class="mint-checkbox-input"
                     type="checkbox"
                     :checked="item.checked" />
              <span class="mint-checkbox-core"></span>
            </span>
          </div>

          <div class="item-pic">
            <img :src="item.GoodsImage" />
          </div>

          <div class="item-detail">
            <div class="item-name">{{item.Title}}</div>
            <!-- <div>规格：{{item.sku}}</div> -->
            <div>规格:2.5kg</div>
            <div class="item-price">
              单价：
              <span>￥{{item.SaleAmount}}</span>
            </div>
          </div>

          <div class="count-step">
            <div class="btn"
                 @click="handleReduce(item)">-</div>
            <input class="number"
                   type="text"
                   :value="item.Quantity" />
            <div class="btn"
                 @click="handleAdd(item)">+</div>
          </div>
        </div>
      </div>
      <!--购物车商品列表 end -->
      <div class="action-bar">
        <div class="left-con">
          <span class="mint-checkbox"
                @click="handleSelectAll">
            <input class="mint-checkbox-input"
                   type="checkbox"
                   :checked="isSelectAll" />
            <span class="mint-checkbox-core"></span>
          </span>
          全选
          <span class="total">
            合计：
            <span class="total-amount">￥{{totalPrice}}</span>
          </span>
        </div>
        <button :disabled="disabled"
                class="calc-btn">去结算({{totalCount}})</button>
      </div>

      <div v-if="visible">
        <div class="overlay"
             @click="visible = false"></div>
        <div class="dialog">
          <div class="close"
               @click="visible = false">x</div>
          <div class="dialog-title">删除商品</div>
          <div class="dialog-content">确定删除商品吗？确定删除商品吗？确定删除商品吗？</div>
          <div>
            <button class="confirm"
                    @click="btnConfirmDel">确定删除</button>
            <button class="cancel"
                    @click="btnCancel">再考虑一下</button>
          </div>
        </div>
      </div>
    </div>

    <template v-else>
      <!-- 无数据 -->
      <no-result tips="购物车空空如也~"></no-result>

    </template>
  </div>
</template>

<script>
import { domain } from '@/api/sys-config.js'
import NoResult from '@/components/NoResult/NoResult'
// let data = [];
// for (let i = 0; i < 2; i++) {
//   data.push(
//     {
//       id: i,
//       name:
//         "猫粮|猫咪冻干猫零食肉干三文鱼牛肉干成猫幼猫6包装 猫粮|猫咪冻干猫零食肉干三文鱼牛肉干成猫幼猫6包装",
//       sku: "2.5kg",
//       price: 1000,
//       count: 10,
//       checked: false
//     }
//   );
// }

export default {
  data () {
    return {
      visible: false,
      disabled: false,
      itemList: [],
      totalPrice: 0,
      totalCount: 0,
      isSelectAll: false
    };
  },

  components: {
    NoResult
  },

  computed: {},

  created () { },

  mounted () {
    let self = this
    self.getCartsList()
  },

  methods: {
    //添加
    handleAdd (item) {
      //alert("111")
      item.Quantity++;
      if (item.checked) {
        this.totalCount++;
        this.totalPrice += item.SaleAmount;
      }
    },
    //减少
    handleReduce (item) {
      if (item.Quantity === 0) return;
      item.Quantity--;
      if (item.checked) {
        this.totalCount--;
        this.totalPrice -= item.SaleAmount;
      }
    },
    //单选
    handleSelect (item) {
      const isChecked = (item.checked = !item.checked);
      if (isChecked) {
        this.totalPrice += item.SaleAmount * item.Quantity;
        this.totalCount += item.Quantity;
      } else {
        this.totalPrice -= item.SaleAmount * item.Quantity;
        this.totalCount -= item.Quantity;
      }
      this.isSelectAll = this.itemList.every(item => item.checked);
    },
    //全选
    handleSelectAll () {
      this.isSelectAll = !this.isSelectAll;
      let totalPrice = 0;
      let totalCount = 0;

      this.itemList.forEach(item => {
        if (this.isSelectAll) {
          item.checked = true;
          totalPrice += item.SaleAmount * item.Quantity;
          totalCount += item.Quantity;
        } else {
          item.checked = false;
        }
      });

      this.totalPrice = totalPrice;
      this.totalCount = totalCount;
    },
    //获取购物车商品列表
    getCartsList () {
      let self = this;
      axios.get(`${domain}/api/miniapps/getCardList`, {
        params: {
          userId: "32977168"
        }
      }).then(function (res) {
        self.itemList = res.data.data;
      }).catch(function (error) {
        console.log(error);
      });
    },
    //点击'再考虑一下'按钮
    btnCancel () {
      this.visible = false;
    },
    //点击确认删除按钮
    btnConfirmDel () {
      let self = this
      let ids = []
      self.itemList.forEach(item => {
        if (item.checked) {
          ids.push(item.GoodsId)
        }
      })


      this.delCart(ids)
    },
    //点击删除按钮
    btnDel () {
      if (this.totalCount <= 0) {
        this.$dialog.alert({
          message: '请选择需要删除的商品'
        }).then(() => {
          // on close
        });
        return false;
      }
      this.visible = true;
    },
    //购物车删除
    delCart (ids) {
      // /api/miniapps/delCart
      let self = this
      axios.post(`${domain}/api/miniapps/delCart`, {
        ids: ids,
      }).then((response) => {
        this.visible = false;
        let { data } = response
        if (data.success) {
          self.getCartsList()
        }
        console.log(data)
      }).catch((error) => {
        console.log(error)
      })
    }
  }
};
</script>
<style lang='scss' scoped>
@import "./index.scss";
</style>